<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        font-size: 12px;
        text-align: center;
      }

      a {
        color: #04d;
        text-decoration: none;
      }

      a:hover {
        color: #f50;
        text-decoration: underline;
      }

      .SubCategoryBox {
        width: 600px;
        margin: 0 auto;
        text-align: center;
        margin-top: 40px;
      }

      .SubCategoryBox ul {
        list-style: none;
      }

      .SubCategoryBox ul li {
        display: block;
        float: left;
        width: 200px;
        line-height: 20px;
      }

      .showmore {
        clear: both;
        text-align: center;
        padding-top: 10px;
      }

      .showmore a {
        display: block;
        width: 120px;
        margin: 0 auto;
        line-height: 24px;
        border: 1px solid #aaa;
      }

      .showmore a span {
        padding-left: 15px;
        background: url(../static/images/down.gif) no-repeat 0 0;
      }

      .promoted a {
        color: #f50;
      }
    </style>
  </head>
  <body>
    <div class="SubCategoryBox">
      <ul>
        <li><a href="#">佳能</a><i>(30440) </i></li>
        <li><a href="#">索尼</a><i>(27220) </i></li>
        <li><a href="#">三星</a><i>(20808) </i></li>
        <li><a href="#">尼康</a><i>(17821) </i></li>
        <li><a href="#">松下</a><i>(12289) </i></li>
        <li><a href="#">卡西欧</a><i>(8242) </i></li>
        <li style="display: none"><a href="#">富士</a><i>(14894) </i></li>
        <li style="display: none"><a href="#">柯达</a><i>(9520) </i></li>
        <li style="display: none"><a href="#">宾得</a><i>(2195) </i></li>
        <li style="display: none"><a href="#">理光</a><i>(4114) </i></li>
        <li style="display: none"><a href="#">奥林巴斯</a><i>(12205) </i></li>
        <li style="display: none"><a href="#">明基</a><i>(1466) </i></li>
        <li style="display: none"><a href="#">爱国者</a><i>(3091) </i></li>
        <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
      </ul>
      <div class="showmore">
        <a href="more.html"><span>显示全部品牌</span></a>
      </div>
    </div>

    <script src="../static/plugins/jquery/jquery-3.3.1.min.js"></script>
    <script>
      var $cateray = $("ul li:gt(5):not(:last)").hide();
      var btn = $(".showmore>a");

      btn.click(function () {
        if ($cateray.is(":hidden")) {
          //隐藏则显示全部
          $cateray.show();
          $(".showmore>a>span").text("精简显示品牌");
          //筛选文本，添加高亮效果
          $("ul li")
            .filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
            .addClass("promoted");
        } else {
          //全部则隐藏
          $cateray.hide();
          $(".showmore>a>span").text("显示全部品牌");
          $("ul li").removeClass("promoted");
        }
        return false; //超链接不跳转
      });
    </script>
  </body>
</html>
